<template>
  <div id="renewContract">
    <el-container>
      <el-main>
        <el-row >
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-row class="floatLeft">
            <el-form-item label="合同编号">
              <el-input  placeholder="合同编号" v-model="form.contractNo" ></el-input>
            </el-form-item>
            <el-form-item label="合同名称">
              <el-input  placeholder="合同名称" v-model="form.contractName"></el-input>
            </el-form-item>
           <el-form-item label="网格名称" prop="trellisName" label-width="110px">
                <el-select @change="getStaffsFirst" v-model="form.trellisCode" filterable placeholder="请选择" >
                  <el-option
                    v-for="item in depts"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="客户经理" prop="accountManager" >
                <el-select  v-model="form.yzStaffId" filterable placeholder="请选择">
                  <el-option
                    v-for="item in staffs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row class="floatLeft">
                <el-button type="primary" size="small" @click="searchFn" icon="el-icon-search">搜索</el-button>
              <el-button @click="resetSearchForm" size="small">重置</el-button>
            </el-row>
          </el-form>
        </el-row>
        <el-row class="floatLeft">
          <el-button type="primary" size="small" @click="createContract" plain>新增</el-button>
        </el-row>
        <el-table
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          size="mini"
          :data="tableData"
          highlight-current-row
          border
          style="width: 100%"
          height="500"
        >
          <el-table-column label="序号"
            type="index"
            width="50"></el-table-column>
          <el-table-column prop="contractRenewNoGlobal" label="旧合同编号"></el-table-column>
          <el-table-column prop="contractNoGlobal" label="新合同编号"></el-table-column>
          <el-table-column prop="contractName" label="合同名称" width="280"></el-table-column>
          <el-table-column prop="repositoryNameUnicom" label="我方主体"></el-table-column>
          <el-table-column prop="repositoryNameVendor" label="客户名称"></el-table-column>
          <el-table-column prop="businessName" label="业务类型"></el-table-column>
          <el-table-column prop="signWayName" label="计收方式"></el-table-column>
          <el-table-column prop="comName" label="公司名称"></el-table-column>
          <el-table-column prop="deptCode" label="部门代码"></el-table-column>
          <el-table-column prop="deptName" label="部门名称"></el-table-column>
          <el-table-column prop="contractDesc" label="合同注释"></el-table-column>
          <el-table-column prop="contractTimelimitName" label="合同履行期限"></el-table-column>
          <el-table-column prop="performPersonName" label="履行人姓名"></el-table-column>
          <el-table-column prop="performDeptName" label="履行人部门"></el-table-column>
          <el-table-column prop="isRenew" label="是否续签"></el-table-column>
          <el-table-column prop="takerCode" label="承办人代码"></el-table-column>
          <el-table-column prop="takerName" label="承办人名称"></el-table-column>
          <el-table-column prop="takerMobile" label="承办人联系方式"></el-table-column>
          <el-table-column prop="arrairAmount" label="当前合同总金额"></el-table-column>
          <el-table-column prop="companyid" label="公司ID"></el-table-column>
          <el-table-column prop="signDate" label="签约时间"></el-table-column>
          <el-table-column prop="startDate" label="合同履行开始时间"></el-table-column>
          <el-table-column prop="endDate" label="合同履行结束时间"></el-table-column>
          <el-table-column prop="signDeptName" label="签约部门"></el-table-column>
<!--          <el-table-column prop="creationDate" label="合同创建时间" :formatter="formatterCreationDate"></el-table-column>-->
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column prop="inputDate" label="录入日期" :formatter="formatter"></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
              <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total=total
          :hide-on-single-page="false"
          :page-size="10"
          @current-change="currentChange">
        </el-pagination>
        <el-dialog title="维护新旧合同关系" class="dialogTitle"  :visible.sync="dialogTableVisible" @open="openDialog" width="85%">
          <el-form :inline="true"  :model="dialog.searchForm" class="demo-form-inline">
            <el-row class="floatLeft">
              <el-form-item label="合同编号">
                <el-input size="small"  placeholder="合同编号" v-model="dialog.searchForm.contractNo" ></el-input>
              </el-form-item>
              <el-form-item label="合同名称">
                <el-input size="small"  placeholder="合同名称" v-model="dialog.searchForm.contractName"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="dialogSearchFun" icon="el-icon-search">搜索</el-button>
              </el-form-item>
            </el-row>
            <span style="float: right;color: red">*请选择旧合同</span>
          </el-form>
          <el-table
            size="small"
            :data="dialog.tableData"
            @row-click="getRowDetails"
            highlight-current-row
            border
            style="width: 100%"
            height="200">
            <el-table-column label="序号"
                             type="index"
                             width="50"></el-table-column>
            <el-table-column prop="contractNoGlobal" label="合同编号"></el-table-column>
            <el-table-column prop="contractName" label="合同名称"></el-table-column>
            <el-table-column prop="repositoryNameUnicom" label="我方主体"></el-table-column>
            <el-table-column prop="repositoryNameVendor" label="客户名称"></el-table-column>
            <el-table-column prop="businessName" label="业务类型"></el-table-column>
            <el-table-column prop="signWayName" label="计收方式"></el-table-column>
            <el-table-column prop="signDeptName" label="签约部门"></el-table-column>
          </el-table>
<!--          <el-pagination-->
<!--            small-->
<!--            layout="prev, pager, next"-->
<!--            :total=dialog.total-->
<!--            :hide-on-single-page="false"-->
<!--            :page-size="10"-->
<!--            @current-change="dialogCurrentChange">-->
<!--          </el-pagination>-->
          <el-form :inline="true"  :model="dialog.searchFormNew" class="demo-form-inline">
            <el-row class="floatLeft">
              <el-form-item label="合同编号">
                <el-input size="small" placeholder="合同编号" v-model="dialog.searchFormNew.contractNo" ></el-input>
              </el-form-item>
              <el-form-item size="small" label="合同名称">
                <el-input  placeholder="合同名称" v-model="dialog.searchFormNew.contractName"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="dialogSearchFunNew" icon="el-icon-search">搜索</el-button>
              </el-form-item>
            </el-row>
            <span style="float: right;color: red">*请选择新合同</span>
          </el-form>
          <el-table
            size="small"
            :data="dialog.tableDataNew"
            @row-click="getRowDetailsNew"
            highlight-current-row
            border
            style="width: 100%"
            height="200">
            <el-table-column label="序号"
                             type="index"
                             width="50"></el-table-column>
            <el-table-column prop="contractNoGlobal" label="合同编号"></el-table-column>
            <el-table-column prop="contractName" label="合同名称"></el-table-column>
            <el-table-column prop="repositoryNameUnicom" label="我方主体"></el-table-column>
            <el-table-column prop="repositoryNameVendor" label="客户名称"></el-table-column>
            <el-table-column prop="businessName" label="业务类型"></el-table-column>
            <el-table-column prop="signWayName" label="计收方式"></el-table-column>
            <el-table-column prop="signDeptName" label="签约部门"></el-table-column>
          </el-table>
<!--          -->
          <el-main>
            <el-form ref="dialogForm" :inline="true" :rules="dialog.rules" :model="dialog.form"  label-width="100px" style="float: left">
              <el-row>
                <el-form-item label="旧合同编号" prop="contractRenewNoGlobal">
                  <el-input v-model="dialog.form.contractRenewNoGlobal" :disabled="true" ></el-input>
                </el-form-item>
                <el-form-item label="新合同编号" prop="contractNoGlobal">
                  <el-input v-model="dialog.form.contractNoGlobal" maxlength="200" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="新合同名称" prop="contractName">
                  <el-input v-model="dialog.form.contractName" style="width: 400px" maxlength="1024" :disabled="true"></el-input>
                </el-form-item>
              </el-row>
              <el-row style="float: left">
                <el-form-item label="备注"  prop="remark1">
                  <el-input type="textarea" v-model="dialog.form.remark1" maxlength="500"></el-input>
                </el-form-item>
              </el-row>
              <el-form-item>
                <el-button type="primary" @click="submitForm('dialogForm')">确定</el-button>
                <el-button @click="dialogTableVisible = false" >关闭</el-button>
                <el-button @click="resetForm">重置</el-button>
              </el-form-item>
            </el-form>

          </el-main>
        </el-dialog>
      </el-main>
    </el-container>
    <router-view/>
  </div>


</template>

<script>
  import '@/assets/supply.css'
  import axios from 'axios'
  import {getUrlParams} from '../../components/utils/getUrlParams'
  import {
    getBaseDataList,
    queryContractErpImportantList,
    queryContractErpListCount,
    getDept,
    getDeptStaff,
    queryContractErpImportantListNew
  } from '../../components/utils/getDataFn'
  import global from '../../components/utils/global'
  import {formatDate} from '../../components/utils/formatDate'

  export default {
    name: 'renewContract',
    methods: {
      getStaffsFirst(){
        this.form.yzStaffId='';
        getDeptStaff(this.form.trellisCode,this);
      }   ,
      getStaffs(){
        this.dialog.form.yzStaffId='';
        getDeptStaff(this.dialog.form.trellisCode,this);
      }   ,
      formatterCreationDate (row, column) {
        row.creationDate = formatDate(new Date(row.creationDate), 'yyyy-MM-dd')
        return row.creationDate
      },
      createContract () {
        this.dialogTableVisible = true
        this.isCreate = true
      },
      handleEdit (row) {
        this.isCreate =false;
        for(let item in this.dialog.form){
          if(item in row){
            this.dialog.form[item] = row[item]
          }
        }
        this.dialogTableVisible = true;
      },
      resetSearchForm() {
          for (let item in this.form) {
              this.form[item] = ''
            }
      },
      resetForm () {
        if (this.isCreate === true) {
          for (let item in this.dialog.form) {
            if (item !== 'staffId') {
              this.dialog.form[item] = ''
            };
          }
        }
      },
      handleDelete (row){
        this.open(row)
      },
      formatter(row, column) {
        row.inputDate = formatDate(new Date(row.inputDate),'yyyy-MM-dd')
        return row.inputDate;
      },

      searchFn () {
        this.startSize = 0
        this.endSize = 11
        this.currentPage = 1
        this.queryContractList()
        this.queryContractListCount()
      },
      refreshTable(){
        this.queryContractList()
        this.queryContractListCount()
      },
      onSubmit () {
        this.queryContractList()
        this.queryContractListCount()
      },
      queryContractList: function () {
        let _this = this
        _this.getQueryParams()
        axios({
          methods: 'get',
          url: global.host+'/renewContract/queryContractList',
          params: {params: JSON.stringify(_this.queryParams)}
        }).then(res => {
          console.log(res)
          _this.tableData = res.data
        })
      },
      queryContractListCount: function () {
        let _this = this
        _this.getQueryParams()
        axios({
          methods: 'get',
          url: global.host+'/renewContract/queryContractListCount',
          params: {params: JSON.stringify(_this.queryParams)}
        }).then(res => {
          console.log(res)
          _this.total = res.data
        })
      },
      currentChange (cpage) {
        let _this = this
        _this.currentPage = cpage
        _this.startSize = cpage * 10 - 10
        _this.endSize = cpage * 10
        this.onSubmit()
      },
      dialogCurrentChange (cpage) {
        let _this = this
        _this.dialog.currentPage = cpage
        _this.dialog.startSize = cpage * 10 - 10
        _this.dialog.endSize = cpage * 10
        this.dialogSearchFun()
      },
      getQueryParams () {
        this.queryParams = {
          startSize: this.startSize,
          endSize: this.endSize,
          contractName: this.form.contractName,
          contractNo: this.form.contractNo,
          yzStaffId: this.form.yzStaffId,
          trellisCode: this.form.trellisCode,
          signWay: this.form.signWay,
          staffId: this.staffId,
          serialNumber: this.form.serialNumber

        }
      },
      //构造弹出表单参数
      getDialogQueryParams () {
        this.dialog.queryParams = {
          startSize: this.dialog.startSize,
          endSize: this.dialog.endSize,
          contractName:this.dialog.searchForm.contractName,
          contractNo:this.dialog.searchForm.contractNo,
          yzStaffId:this.dialog.searchForm.yzStaffId,
          accountManager:this.dialog.searchForm.accountManager,
          trellisCode:this.dialog.searchForm.trellisCode,
          trellisName:this.dialog.searchForm.trellisName,
          signWay:this.dialog.searchForm.signWay,
          staffId : this.dialog.form.staffId
        }
        return this.dialog.queryParams;
      },
      getRowDetails (row) {
        this.dialog.form.contractRenewNoGlobal = row.contractNoGlobal
      },
      getRowDetailsNew (row) {
        this.dialog.form.contractNoGlobal = row.contractNoGlobal
        this.dialog.form.contractName = row.contractName
        this.dialog.form.repositoryNameVendor = row.repositoryNameVendor;
      },
      handleExceed (files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeRemove (file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      },
      dialogSearchFun () {
        this.dialog.contractDialogData = queryContractErpImportantList(this.getDialogQueryParams(), this)
        this.dialog.total = queryContractErpListCount(this.getDialogQueryParams(), this) //调用合同明细Count
      },
      dialogSearchFunNew () {
        this.dialog.contractDialogDataNew = queryContractErpImportantListNew(this.getDialogQueryParams(), this)
        // this.dialog.totalNew = queryContractErpListCount(this.getDialogQueryParams(), this) //调用合同明细Count
      },
      openDialog () {
        document.getElementsByClassName('el-dialog__title').innerText = '新增续签合同'
        if (this.isCreate === false) {
          document.getElementsByClassName('el-dialog__title').innerText = '修改续签合同'
        }
      },
      submitForm(formName) {
        let _this = this;
        let url =global.host+'/renewContract/insert';
        if(this.isCreate===false){
          url =global.host+'/renewContract/update';
        }
        if(this.dialog.form.contractRenewNoGlobal ==this.dialog.form.contractNoGlobal){
          alert("旧合同编号不能于新合同编号相同。")
          return
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let renew = this.dialog.form;
            axios.post(url,renew).then((res)=>{
              console.log(res);
              debugger
              if(res.data.success===true){
                _this.refreshTable();
                _this.dialogTableVisible =false
                _this.open1(res.data.message)
              }else{
                _this.open2(res.data.message)
              }
            })
          } else {
            return false;
          }
        });
      },
      open1(msg) {
        this.$message({
          message: msg,
          type: 'success'
        });
      },
      open2(msg) {
        this.$message({
          message: msg,
          type: 'warning'
        });
      },
      open(row) {
        let _this = this;
        this.$confirm('请确认是否删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        debugger
          let params = {id: row.id, staffId: this.staffId}
          axios.post(global.host+'/renewContract/delete', params).then((res) => {
            console.log(res);
          debugger
            if (res.data.success === true) {
              _this.refreshTable();
              _this.$message({
                type: 'success',
                message: '删除成功!'
              });
            } else {
              _this.$message({
                type: 'info',
                message: '已取消删除'
              });
            }
          })
        })
      }
    },
    created () {
      this.staffId = getUrlParams('staffId')
      getBaseDataList(1001, this)
      getBaseDataList(2001, this)
      this.dialog.form.staffId = getUrlParams('staffId')
      console.log(this.dialog.form.staffId)
      getDept(this);
    }
    ,
    data () {
      return {
        isCreate: true,// true 新增  false 修改
        staffs:[],
        depts:[],
        signWayData: [], //下来字典
        businessCodingData: [], //业务类型
        dialogTableVisible: false,
        tableData: [],
        total: 0,
        currentPage: 1,
        startSize: 0,
        endSize: 11,
        queryParams: {},
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        dates: [],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        fileList: [],
        form:{
          contractName:'',
          contractNo:'',
          yzStaffId:'',
          accountManager:'',
          trellisCode:'',
          trellisName:'',
          signWay:''
        },
        staffId:'',
        dialog:{
          searchForm:{
            contractName:'',
            contractNo:'',
          },
          searchFormNew:{
            contractName:'',
            contractNo:'',
          },
          form:{
            id:'',
            contractRenewNoGlobal:'',
            contractNoGlobal:'',
            contractName:'',
            repositoryCode:'',
            repositoryNameVendor:'',
            businessCoding:'',
            serialNumber:'',
            signWay:'',
            yzStaffId:'',
            accountManager:'',
            trellisCode:'',
            trellisName:'',
            remark1:'',
            staffId:''
          },
          total:0,
          tableData:[],
          totalNew:0,
          tableDataNew:[],
          currentPage: 1,
          startSize: 0,
          endSize: 11,
          queryParams:{},
          rules: {
            contractRenewNoGlobal: [{required: true, message: '旧合同编号', trigger: 'blur'}],
            contractNoGlobal: [{required: true, message: '合同编号', trigger: 'blur'}],
            contractName: [{required: true, message: '合同名称', trigger: 'blur'}],
          }
        },

      }
    }
  }
</script>

<style>
  #renewContract {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 20px;
  }

  html, body {
    height: auto;
  }
</style>
